<script setup lang="ts">
import defaultLogo from "@/assets/logo.png"
import { useAudioPlayerStore} from "@/stores"
import _ from 'lodash'
const audioStore = useAudioPlayerStore()

const props = defineProps({
  title: {
    required: true,
    type: String
  },
  songs: {
    required: true,
    type: Array<song_info>
  },
  logo: {
    required: false,
    type: String,
  }

})

const handleDownload = ()=>{

}

const handlePlayAll = ()=>{
  if(props.songs !== undefined && props.songs.length > 0)
  {
    audioStore.setSongList(props.songs)
    const first = _.first(props.songs)
    if(first !== undefined)
    {
      audioStore.setPlayingSong(first,true)
    }
  }
}

</script>

<template>
  <header>
    <img :src="props.logo ? props.logo: defaultLogo" alt="这是缩略图" />
    <div class="info">
      <h1>{{ props.title }}</h1>
      <el-row class="buttons">
        <el-button type="success" round @click="handlePlayAll">播放</el-button>
        <el-button type="success" round >+ 队列</el-button>
        <el-button type="info" @click="handleDownload" round>下载</el-button>
      </el-row>
    </div>
  </header>
</template>

<style lang="scss" scoped>

img{
  background-color: #f6f6f6;
  width: 167px;
  height: 167px;
  border-radius: 8px;
}

header{
  display: flex;
  //position: -webkit-sticky;
  //position: sticky;
  top: 0;
  background-color: #f6f6f6;
  z-index: 10;
}

.info{
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>